<template>
	<cl-view-group ref="ViewGroup">
		<template #item-name="{ item }"> {{ item.code }} - {{ item.name }} </template>

		<template #right>
			<cl-crud ref="Crud">
				<cl-row>
					<cl-refresh-btn />
					<cl-add-btn />
					<cl-flex1 />
					<cl-search-key placeholder="搜索请求地址、名称、编码" />
				</cl-row>
				<cl-row>
					<cl-table ref="Table" />
				</cl-row>
				<cl-row>
					<cl-flex1 />
					<cl-pagination />
				</cl-row>
				<!-- 新增、编辑 -->
				<cl-upsert ref="Upsert" />
			</cl-crud>
		</template>
	</cl-view-group>
</template>

<script lang="ts" name="saas-app" setup>
import { setFocus, useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { computed, onMounted } from "vue";
import { deepTree } from "/@/cool/utils";
import { cloneDeep } from "lodash-es";
import { useViewGroup } from "/@/plugins/view";
const { service } = useCool();


const { ViewGroup } = useViewGroup({
	label: "租户",
	title: "应用列表",
	service: service.saas.tenant,
	onSelect(item) {
		refresh({
			tenantId: item.id,
			page: 1
		});
	},
	onEdit() {
		return {
			dialog: {
				width: "800px"
			},

			items: [
				{
					prop: "code",
					label: "编码",
					required: true,
					span: 12,
					component: {
						name: "el-input"
					}
				},
				{
					prop: "mobile",
					label: "手机号",
					required: true,
					span: 12,
					component: {
						name: "el-input"
					}
				},
				{
					prop: "name",
					label: "名称",
					required: true,
					component: {
						name: "el-input"
					}
				},

				{
					prop: "brief",
					label: "描述",
					required: true,
					component: { name: "el-input", props: { type: "textarea", rows: 4 } }
				}
			],
			plugins: [setFocus("name")]
		};
	}
});

// cl-crud
const Crud = useCrud({
	service: service.saas.app,
	onRefresh(params, { render }) {
		service.saas.app
			.page({
				...params
			})
			.then((res) => {
				// 渲染数据
				render(res["list"], {
					size: Number(res["pagination"].size),
					page: Number(res["pagination"].page),
					total: Number(res["pagination"].total)
				});
			});
	}
});

onMounted(() => {
	refresh({ page: 1, size: 20 });
});

function refresh(params?: any) {
	console.log(JSON.stringify(params));
	Crud.value?.refresh(params);
}

// cl-upsert
const Upsert = useUpsert({
	dialog: {
		width: "800px"
	},

	items: [
		{
			prop: "appKey",
			label: "appKey",
			span: 12,
			required: true,
			component: {
				name: "el-input"
			}
		},
		{
			prop: "name",
			label: "名称",
			span: 12,
			required: true,
			component: {
				name: "el-input"
			}
		},
		{
			prop: "appSecret",
			label: "appSecret",
			span: 12,
			required: true,
			component: {
				name: "el-input"
			}
		}
	],
	plugins: [setFocus("name")]
});

// cl-table
const Table = useTable({
	contextMenu: ["refresh"],
	columns: [
		{
			type: "selection"
		},
		{
			prop: "name",
			label: "名称",
			width: 200,
			showOverflowTooltip: true
		},
		{
			prop: "appKey",
			label: "appKey",
			width: 200,
			showOverflowTooltip: true
		},
		{
			prop: "appSecret",
			label: "appSecret",
			width: 200,
			showOverflowTooltip: true
		},
		{
			prop: "createdAt",
			label: "创建时间",
			align: "left",
			width: 200,
			sortable: "desc"
		},
		{
			label: "更新时间",
			prop: "updatedAt",
			sortable: "custom",
			width: 200
		},
		{
			label: "操作",
			type: "op",
			width: 180,
			buttons: ["info", "edit", "delete"]
		}
	]
});
</script>
